<template>
  <div class="page">

    <div class="flex">
      <div class="img-class">
        <div class="img-class-flex">
          <img src="@/assets/newImg/home/big-person.png" alt="" />
          <div class="img-name-div">
            <img src="@/assets/newImg/home/vip@2x.png" alt="" />
            <div>{{info.lvDiscount.lvName}}级采购员</div>
          </div>
          <div class="img-class-name">{{ info.purchaserName }}</div>
        </div>
        <div class="img-class-buttom" @click="jumpExit">
          <div class="logoDiv">退出登录</div>
        </div>
      </div>
      <div class="right-content">
        <div class="right-content-header">
          <div>会员中心</div>
        </div>
        <div class="right-content-div">

          <div class="right-content-div-item">
            <img src="@/assets/newImg/home/copon.png" alt="" />
            <div>
              <div class="name">{{ info.couponNums }}</div>
              <div class="tips">我的优惠券</div>
            </div>
          </div>

          <div class="right-content-div-item">
            <img src="@/assets/newImg/home/xin.png" alt="" />
            <div>
              <div class="name"><span class="name-unit">￥</span>{{ companyLimit.nowLimit }}</div>
              <div class="tips">我的可用授信额度</div>
            </div>
          </div>
          <div class="right-content-div-item">
            <img src="@/assets/newImg/home/daily.png" alt="" />
            <div>
              <div class="name">{{ info.accountDays }}<span class="name-day">天</span></div>
              <div class="tips">我的剩余账期</div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="section-content">
      <div class="section-content-left">
        <div class="section-content-left-name">我的订单</div>
        <div class="section-content-left-flex">
          <div class="section-content-left-Item"  @click="jumpDetail">
            <el-badge :value="orderObjSum.waitPay" class="item"  :hidden="orderObjSum.waitPay == 0">
              <img src="@/assets/newImg/home/pay.png" alt="" />
            </el-badge>
            <div>待付款</div>
          </div>

          <div class="section-content-left-Item"  @click="jumpDetail">
            <el-badge :value="orderObjSum.waitDelivery" class="item" :hidden="orderObjSum.waitDelivery == 0">
              <img src="@/assets/newImg/home/pay.png" alt="" />
            </el-badge>
            <div>待发货</div>
          </div>

          <div class="section-content-left-Item"  @click="jumpDetail">
            <el-badge :value="orderObjSum.delivery" class="item"  :hidden="orderObjSum.delivery == 0">
              <img src="@/assets/newImg/home/send.png" alt="" />
            </el-badge>
            <div>已发货</div>
          </div>

          <div class="section-content-left-diver"></div>

          <div class="section-content-left-Item" @click="jumpDetail">
            <el-badge :value="0" class="item" hidden >
              <img src="@/assets/newImg/home/orrder.png" alt="" />
            </el-badge>
            <div>全部订单</div>
          </div>

        </div>

        <div class="newList">

          <div class="newList-item">
            <div class="flex">
              <img src="@/assets/newImg/home/product.png" alt="" />
              <div class="">
                <div class="newList-item-name">您的订单已由本人签收。如有疑问您可以联系配送员【王同联系配送员【王同</div>
                <div class="newList-item-time">普通快递 | 2024-03-27 13:30:21 </div>
              </div>
            </div>
            <div class="newList-item-look">查看详情</div>
          </div>
          <div class="newList-item">
            <div class="flex">
              <img src="@/assets/newImg/home/product.png" alt="" />
              <div class="">
                <div class="newList-item-name">您的订单已由本人签收。如有疑问您可以联系配送员【王同联系配送员【王同</div>
                <div class="newList-item-time">普通快递 | 2024-03-27 13:30:21 </div>
              </div>
            </div>
            <div class="newList-item-look">查看详情</div>
          </div>
          <div class="newList-item">
            <div class="flex">
              <img src="@/assets/newImg/home/product.png" alt="" />
              <div class="">
                <div class="newList-item-name">您的订单已由本人签收。如有疑问您可以联系配送员【王同联系配送员【王同</div>
                <div class="newList-item-time">普通快递 | 2024-03-27 13:30:21 </div>
              </div>
            </div>
            <div class="newList-item-look">查看详情</div>
          </div>

        </div>
      </div>

      <div class="section-content-product">
        <div class="section-content-product-name">常购商品</div>
      </div>
      
    </div>
  </div>
</template>

<script>
import productList from "@/components/product/productList.vue";
// import cusUploader from "@/components/uploader/cusUploader.vue"; //上传
import orderList from "@/components/order/orderList.vue"; //
import { mapState } from "vuex";

export default {
  name: "servicePage",
  components: {
    productList,
    orderList,
    // cusUploader,
  },
  data() {
    return {
      pagination: {
        page: "1",
        pageNum: "8",
      },
      count: 0,

      my_info: {},
      user_index: {}, //用户首页数据
      list_order: [],
      list_goods: [],

      uploadImg: "",
      youhui_code: "",
      youhui_msg: "",
      companyLimit:{},
      orderObjSum:{},
      info:{
        lvDiscount:{},
        couponNums:0,
        accountDays:0,
      }
    };
  },
  computed: {
    // ...mapState([""]),
  },
  created() {
    this.setView();
  },
  methods: {
    jumpExit(){
      this.$store.commit("remove_vuex_user");
      this.$router.push("/pagelogin");
    },
    jumpDetail(){
      this.$router.push('/order-list')
    },
    emitConfirm() {
      this.query_order()
    },
    // uploadSuccess(col, data) {
    //   if (data.code == 200) {
    //     this.uploadImg = data.image;
    //   }
    // },

    setView() {
      this.$httpApi('/api/v1/purchaser/info',{},'get').then(res => {
        this.companyLimit = res.data.companyLimit;
        this.info = res.data;
      });
      this.$httpApi('api/v1/purchaser/orderStatus/nums',{}, 'get').then(res => {
        this.orderObjSum = res.data
      });
    },
    query_user() {
      // this.$store.dispatch("query_user");
      this.$api({
        url: '/service.php',
        method: 'get',
        data: {
          action: 'users_userInfo',
        },
      }).then(res => {
        if (res.code == 200) {
          this.my_info = res.data
        }
      })
    },

    //用户主页数据
    query_userIndex() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "users_index",
        },
      }).then((res) => {
        let { code, data } = res;
        if (res.code == 200) {
          this.user_index = res.data;
        }
      });
    },

    //订单查询
    //query_order() {
    //  this.$api({
    //    url: '/service.php',
    //    method: 'get',
    //    data: {
    //      action: 'orders_lists',
    //      page: 1,
    //      pageNum: 2,
    //      scene: 0,
    //    },
    //  }).then((res) => {
    //    let { code, data } = res;
    //    if (code == 200) {
    //      this.list_order = data.list;
    //    }
    //  });
    //},

  },
};
</script>

<style scoped lang="less">
::v-deep .el-badge__content, .el-progress.is-exception .el-progress-bar__inner{
  background: #EF1F1F;
}
.right-content{
  width: 704px;
  height: 222px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;

  .right-content-header{
    height: 67px;
    border-bottom: 1px solid #E5E5E5;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    line-height: 67px;
    padding-left: 23px;
  }

  .right-content-div{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 155px;
    
    .right-content-div-item{
      display: flex;

      img {
        width: 40px;
        height: 40px;
        margin-right: 8px;
      }
      .name{
        font-weight: bold;
        font-size: 28px;
        color: #484848;
        line-height: 32px;
      }
      .name-unit{
        font-size: 18px;
      }
      .name-day{
        font-size: 14px;
      }
      .tips{
        font-weight: 400;
        font-size: 14px;
        color: #606060;
        line-height: 20px;
      }
    }
  }

}

.newList-item{
  padding-left: 30px;
  padding-right: 51px;
  height: 102px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #EDEDED;;

  img {
    width: 72px;
    height: 72px;
    margin-right: 11px;
  }
  .newList-item-name{
    font-weight: 400;
    font-size: 14px;
    color: #757575;
    line-height: 20px;
    width: 400px; /* 固定宽度为 400px */
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }
  .newList-item-time{
    font-weight: 400;
    font-size: 14px;
    color: #757575;
    line-height: 20px;
    margin-top: 10px;
  }
  .newList-item-look{
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    line-height: 20px;
  }
}

.section-content-product{
  width: 256px;
  height: 483px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #EDEDED;
  margin-left: 16px;

  .section-content-product-name{
    height: 52px;
    border-bottom: 1px solid #EDEDED;
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    line-height: 52px;
    padding-left: 20px;
  }
}

.section-content{
  margin-top: 20px;
  display: flex;
  .section-content-left{
    width: 684px;
    height: 482px;
    background: #FFFFFF;
    border: 1px solid #EDEDED;
  }

  .section-content-left-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 123px;
    padding-left: 78px;
    padding-right: 78px;
    // border-bottom: 1px solid #EDEDED;;
  }

  .section-content-left-name{
    height: 52px;
    border-bottom: 1px solid #EDEDED;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 52px;
    padding-left: 28px;
  }

  .section-content-left-Item{
    display: flex;
    flex-direction: column;
    align-items: center;

    img{
      width: 44px;
      height: 39px;
    }

    div{
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 20px;
      margin-top: 9px;
    }
  }

  .section-content-left-diver{
    height: 69px;
    width: 1px;
    background: #E5E5E5;
  }
}

.img-class{
  width: 253px;
  height: 247px;
  background: #85A6D6;
  position: relative;

  .img-class-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .img-class-buttom{
    position: absolute;
    width: 253px;
    height: 41px;
    background: rgba(0,0,0,0.5);
    border-radius: 0px 0px 0px 0px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center
  }

  img{
    width: 84px;
    height: 84px;
  }

  .logoDiv{
    width: 90px;
    height: 26px;
    background: #EF1F1F;
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 26px;
    text-align: center;
    border-radius: 30px;
    cursor: pointer;
  }

  .img-name-div{
    width: 112px;
    height: 24px;
    background: #282D43;
    border-radius: 100px 100px 100px 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -10px;


    img {
      width: 18px;
      height: 15px;
      margin-right: 5px;
    }
    div{
      font-weight: normal;
      font-size: 14px;
      color: #FFE6BA;
    }
  }
}

.img-class-name{
  font-weight: 500;
  font-size: 18px;
  color: #FFE6BA;
  line-height: 20px;
  margin-top: 16px;
}

/deep/ .box-wrap .list .item:nth-child(4n) {
  margin-right: 0;
}

/deep/ .box-wrap .list .item:nth-child(5n) {
  margin-right: 10px;
}

/deep/ .box-wrap .list .item {
  margin-top: 10px;
}

/deep/ .box-wrap .list .item:nth-child(-n + 4) {
  margin-top: 10px;
}

.section-box {
    display: flex;
  align-items: center;
}

.section-1 {
    display: flex;
          justify-content: center;
          align-items: center;
  position: relative;
  background: #ffffff url("~@img/my-index/user-bg.png");
  background-size: 100% 100%;
  padding: 0 15px;
  width: 256px;
  height: 210px;

  .left {
    height: calc(100% - 48px);

    .img-box {
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
      }
    }

    .name {
      margin-top: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .right {
      display: flex;
  align-items: center;
  justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: #ffffff;
    text-align: left;
    padding: 0 15px;
    border: 1px solid #009F39;
    border-radius: 0 0 11px 11px;

    .text-1 {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }

    .text-2 {
        display: flex;
  align-items: center;

      img {
        width: 24px;
        margin-right: 5px;
      }

      span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #009F39;
      }
    }
  }
}

.section-2 {
  flex: 1;

  .list {
      display: flex;
  align-items: center;
  justify-content: space-between;
    height: 185px;
    background: #ffffff;
    border: 1px solid #eee9e4;

    .item {
      text-align: center;
      width: 25%;
      padding: 10px 0;
      border-right: 1px solid #d5d8de;
      // margin-left: 40px;
      // margin-right: 40px;
      font-size: 16px;
      cursor: pointer;

      &:last-child {
        border-right: none;
      }

      .label {
        margin-top: 20px;
        font-size: 16px;
        font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
        font-weight: normal;
        color: #333333;
      }

      .val {
        span {
          // margin-left: 5px;
          font-size: 32px;
          font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
          font-weight: normal;
          color: #009F39;
        }
      }
    }
  }
}

.page {
  padding-bottom: 70px;
}

.section-title {
  border-bottom: 1px solid #dedede;
    display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 32px;

  .label {
    font-size: 18px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }

  .action {
      display: flex;
  align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #009F39;
    cursor: pointer;

    img {
      width: 14px;
      margin-left: 10px;
    }
  }
}

.section-order {
  margin: 25px 0;
  background: #fff;

  .order-box {
    .empty-info {
      text-align: center;
      padding: 40px 0;

      // border-top: 1px solid #dedede;
      .empty-img {
        text-align: center;

        img {
          width: 190px;
        }
      }

      .empty-text {
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }

      .empty-action {
        font-size: 14px;
        color: #009F39;
      }
    }
  }

  .order-info {
    padding: 24px 32px;
  }
}

.suggest-goods {
  background: #fff;

  .list-wrap {
    padding: 40px 30px;
  }

  /deep/ .product-list {
    .product-item {
      // margin-right: 23px;

      &:nth-child(4n) {
        // margin-right: 0;
      }

      &:nth-child(5) {
        // margin-top: 50px;
      }
    }
  }
}
</style>

<style scoped lang="less" src="@/assets/h5css/user/my-index.less"></style>
